<!DOCTYPE html>
<html lang="lt-LT">
<head>
<meta charset="utf-8">
<title>Tick Tack Toe</title>
<script src="http://88.222.149.115:8080/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div>Pradeda: <select id="startType"><option value="o">Nuliukai</option><option value="x">Iksiukai</option></select> Dėliosite: <select id="type"><option value="o">Nuliukus</option><option value="x">Iksus</option></select><button id="newGame">Naujas žaidimas</button><span id="newGameUrl"></span></div>
	<br>
	<div id="output" style="font-family:monospace;"></div>
	<div id="info"></div>
<script>
var baseUrl = 'http://88.222.149.115:8080'
//var baseUrl = 'http://127.0.0.1:8080'
var socket = io.connect(baseUrl);
//console.log(socket.id);
/*
socket.on('news', function (data) {
	setTimeout(function() {
		socket.emit('my other event', { my: 'data' });
	}, 2000);
});*/
//if(window.location.hash == '#la')
//	alert(window.location.hash);
//for(i in window.location)
	console.log(window.location.pathname.substr(1));

$('#newGame').click(function() {
	socket.emit("newGame", {startType:$('select#startType option:selected').val(), type:$('select#type option:selected').val()});
	console.log('newGame');
});
var playerId, matchId, action;
//http://88.222.149.115:8080/ticktacktoe/1/creator/1/1582274
socket.on('connect', function () {
	console.log(this.socket.sessionid);
	var path = window.location.pathname.substr(1).split('/')
	if(path.length == 5) {
		matchId = parseInt(path[1])
		action = path[2]
		playerId = parseInt(path[3])
		secretKey = parseInt(path[4])
		socket.emit('connect', {'matchId':matchId, 'playerId':playerId, 'action':action, 'secKey':secretKey});
	}
	console.log('playerId', playerId, 'matchId', matchId);
});

socket.on('newGameData', function (data) {
	$('#newGameUrl').text(baseUrl+'/'+data);
	console.log('#newGameUrl');
});
socket.on('boardUpdate', function (data) {
	var output = '';
	for (var i = 0; i < data.length; i++) {
		for (var k = 0; k < data[i].length; k++) {
			output += '<div class="board" id="b'+i+k+'">';
			output += data[i][k] == 0 ? ' ' : data[i][k];
			output += '</div>';
		}
		if(i != 2)
			output += '<div style=""></div>';
	}
	$('#output').html(output);
	//Actions:
	$('.board').click(function(data) {
		//console.log(data.target.id[1]);
		//console.log({x: data.target.attributes[0].nodeValue[1], y:data.target.attributes[0].nodeValue[2]});//[x]->[1], [y]->[2]
		//console.log($(this).data('id'));
		//console.log($(this).attr("data-id"));
		socket.emit("move", {x: data.target.id[1], y:data.target.id[2]});//TODO:Does it work in IE?
		console.log('move', {y: data.target.id[1], x:data.target.id[2]})
	});

	console.log(output);
	console.log('boardUpdate', data);
});
socket.on('won', function (data) {
	$('#info').hide();
	alert('Congratulations! You won!');
	console.log('Victory', data);
});
socket.on('lose', function (data) {
	$('#info').hide();
	alert('Game over! Next time will be better ;)');
	console.log('Lose...', data);
});
socket.on('yourTurn', function (data) {
	$('#info').show().removeClass().addClass('yourTurn').html('Your turn');
    console.log('yourTurn', data);
});
socket.on('notYourTurn', function (data) {
	$('#info').show().removeClass().addClass('notYourTurn').html('Waiting for other player action');
    console.log('notYourTurn', data);
});
socket.on('disconnected', function (data) {
	$('#info').show().removeClass().addClass('disconnected').html('Your partner disconnected');
	console.log('disconnected', data);
});
socket.on('waiting', function (data) {
	$('#info').show().removeClass().addClass('waiting').html('Waiting for partner to join');
	console.log('waiting', data);
});

/*
var r = []
for (var i = 0; i <= 10; i++) {
	r[i] = []
	for (var j = 0; j <= 10; j++)
		r[i][j] = i;
}
console.log(r);
var r = [[]]
console.log(typeof r);
for (var i = 0; i <= 10; i++) {
	for (var j = 0; j <= 10; j++)
		r[i][j] = i;
}
console.log(r);
var dic = {0 : 'a', 'a':'b', 'ž':'LT'}
console.log(dic)
console.log(dic[0])
console.log(dic.ž)*/
/*
var b = []
b[255] = 'a'
b[1] = 'b'
console.log(b)*/
var arr = {}
arr['bb'] = {}
b = 5
arr['bb']['a'] = b
//var b = arr['bb']['a']
function aa() {
	return arr['bb']
}
b = 6
aa()['a'] = 6
console.log(arr['bb']['a'])
//------------
x = {}
y = [10, 11, 12]
x['a'] = y
console.log(x['a'])
</script>
</body>
</html>
